'use client';

import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { useConnection } from '@solana/wallet-adapter-react';
import { useEffect, useState } from 'react';
import { useLanguage } from '../contexts/LanguageContext';
import Link from 'next/link';

export function Navbar() {
  const { t } = useLanguage();
  const { connection } = useConnection();
  const [network, setNetwork] = useState<string>('');
  const [mounted, setMounted] = useState(false);

  // 防止水合错误
  useEffect(() => {
    setMounted(true);
  }, []);

  // 检测网络类型
  useEffect(() => {
    const detectNetwork = async () => {
      try {
        const rpcUrl = connection.rpcEndpoint;
        if (rpcUrl.includes('localhost') || rpcUrl.includes('127.0.0.1')) {
          setNetwork('本地测试网');
        } else if (rpcUrl.includes('devnet')) {
          setNetwork('远程 Devnet');
        } else if (rpcUrl.includes('mainnet')) {
          setNetwork('主网');
        } else {
          setNetwork('未知网络');
        }
      } catch {
        setNetwork('未知网络');
      }
    };

    if (mounted) {
      detectNetwork();
    }
  }, [connection, mounted]);

  // 在客户端水合完成前不渲染钱包组件
  if (!mounted) {
    return (
      <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex items-center">
              <Link href="/" className="flex items-center space-x-2">
                <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold text-sm">C4</span>
                </div>
                <span className="text-xl font-bold text-white">{t('app.title')}</span>
              </Link>
            </div>
            
            {/* Loading state */}
            <div className="animate-pulse">
              <div className="h-10 w-32 bg-gray-200 rounded-lg"></div>
            </div>
          </div>
        </div>
      </nav>
    );
  }

  return (
    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50 backdrop-blur-sm bg-white/95">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <div className="flex items-center">
            <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
              <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">C4</span>
              </div>
              <span className="text-xl font-bold text-white">{t('app.title')}</span>
            </Link>
          </div>

          {/* Navigation Links */}
          <div className="hidden md:flex items-center space-x-8">
            <Link 
              href="/" 
              className="text-gray-600 hover:text-purple-600 transition-colors font-medium"
            >
              {t('navigation.home')}
            </Link>
            <Link 
              href="/trading" 
              className="text-gray-600 hover:text-purple-600 transition-colors font-medium"
            >
              {t('navigation.trading')}
            </Link>
          </div>

          {/* Right side */}
          <div className="flex items-center space-x-4">
            {/* Network indicator */}
            <div className="hidden sm:flex items-center space-x-2 text-xs">
              <div className={`w-2 h-2 rounded-full ${
                network.includes('本地') ? 'bg-yellow-500' :
                network.includes('Devnet') ? 'bg-blue-500' :
                network.includes('主网') ? 'bg-green-500' :
                'bg-gray-500'
              }`}></div>
              <span className="text-gray-600">{network}</span>
            </div>

            {/* Wallet Button */}
            <div className="wallet-adapter-button-wrapper">
              <WalletMultiButton />
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Navigation */}
      <div className="md:hidden border-t border-gray-200">
        <div className="px-4 py-3 space-y-2">
          <Link 
            href="/" 
            className="block text-gray-600 hover:text-purple-600 transition-colors font-medium py-1"
          >
            {t('navigation.home')}
          </Link>
          <Link 
            href="/trading" 
            className="block text-gray-600 hover:text-purple-600 transition-colors font-medium py-1"
          >
            {t('navigation.trading')}
          </Link>
        </div>
      </div>
    </nav>
  );
}
